<template>
  <div class="home-container">
    <!-- 顶部导航 -->
    <el-header class="main-header" height="80px">
      <div class="header-content">
        <div class="logo-group">
          <img src="@/assets/images/logo.jpg" style="width: 61px; height: 76px;" alt="">
          <span class="logo-text">惠邻农管</span>
          <el-tag type="success" effect="dark">乡村振兴助农平台</el-tag>
        </div>
        <div class="nav-group">
          <el-button type="text">今日团购</el-button>
          <el-button type="text">助农故事</el-button>
          <el-button type="text">冷链溯源</el-button>
        </div>
      </div>
    </el-header>

    <!-- 轮播图区域 -->
    <el-carousel :interval="5000" height="420px" indicator-position="outside" class="agriculture-carousel">
      <el-carousel-item v-for="item in 4" :key="item">
        <div class="carousel-content">
          <div class="image-placeholder"></div>
          <div class="carousel-text">
            <h2>新鲜直达餐桌</h2>
            <p>
              来自田间的新鲜美味，{{
              [
              "24小时极速配送",
              "农家直供无中间商",
              "当季鲜果限量抢购",
              "扶贫助农特惠专场",
              ][item - 1]
              }}
            </p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 新增助农专区介绍模块 -->
    <el-row class="help-section">
      <el-col :span="24">
        <div class="section-header">
          <h2>助农专区介绍</h2>
          <el-button type="success" plain>查看更多助农故事 →</el-button>
        </div>
        <el-row :gutter="30">
          <el-col :span="12">
            <div class="intro-image"></div>
          </el-col>
          <el-col :span="12">
            <div class="intro-content">
              <h3>连接田间与社区</h3>
              <p class="stats">✔ 已帮助832个乡村 | ✔ 累计销售农产品2.3万吨</p>
              <p class="desc">我们通过数字化平台直接连接农户与消费者，减少中间环节损耗，保证农户收益最大化。平台提供从种植指导到终端销售的全链路支持。</p>
              <div class="achievement">
                <el-icon>
                  <trophy />
                </el-icon>
                <span>2023年度乡村振兴创新平台</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 新增农展品介绍模块 -->
    <el-row class="products-section">
      <el-col :span="24">
        <div class="section-header">
          <h2>特色农展品</h2>
          <el-tag type="success" effect="dark">政府认证优质农产品</el-tag>
        </div>
        <el-scrollbar>
          <div class="product-scroll">
            <el-card v-for="(item, index) in featuredProducts" :key="index" class="product-card" shadow="hover">
              <div class="product-image"></div>
              <div class="product-info">
                <h4>{{ item.name }}</h4>
                <p class="origin">{{ item.origin }}</p>
                <p class="feature">{{ item.feature }}</p>
                <div class="certification">
                  <el-icon>
                    <medal />
                  </el-icon>
                  <span>{{ item.certification }}</span>
                </div>
              </div>
            </el-card>
          </div>
        </el-scrollbar>
      </el-col>
    </el-row>

    <!-- 新增团购介绍模块 -->
    <el-row class="groupbuy-section">
      <el-col :span="24">
        <div class="section-header">
          <h2>社区团购指南</h2>
          <el-button type="primary">立即参团</el-button>
        </div>
        <el-steps :space="200" finish-status="success">
          <el-step title="选择商品" icon="shopping-cart">
            <template #description>
              <p>浏览当季优质农产品</p>
              <p>查看实时库存信息</p>
            </template>
          </el-step>
          <el-step title="发起拼团" icon="user">
            <template #description>
              <p>邀请3人即可成团</p>
              <p>享受团购专属价格</p>
            </template>
          </el-step>
          <el-step title="等待配送" icon="van">
            <template #description>
              <p>48小时内冷链发货</p>
              <p>全程温控追踪</p>
            </template>
          </el-step>
        </el-steps>
        <div class="groupbuy-tips">
          <el-alert title="团购优势" type="success" show-icon>
            <p>• 价格低于市场价30%以上</p>
            <p>• 成团失败自动全额退款</p>
            <p>• 团长可获额外积分奖励</p>
          </el-alert>
        </div>
      </el-col>
    </el-row>

    <!-- 特色服务标签 -->
    <div class="feature-tags">
      <el-tag v-for="tag in features" :key="tag" type="info" effect="plain" class="service-tag">
        <el-icon :size="18" class="tag-icon">
          <component :is="tagIcons[tag]" />
        </el-icon>
        {{ tag }}
      </el-tag>
    </div>

    <!-- 服务保障栏 -->
    <el-row class="service-guarantee">
      <el-col v-for="(item, index) in guarantees" :key="index" :span="6" class="guarantee-item">
        <el-icon :size="28" class="guarantee-icon">
          <component :is="item.icon" />
        </el-icon>
        <div class="guarantee-text">
          <h4>{{ item.title }}</h4>
          <p>{{ item.desc }}</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {
  Present,
  Clock,
  Van,
  Coin,
  ScaleToOriginal,
  Sunny,
} from "@element-plus/icons-vue";

import { Trophy, Medal } from '@element-plus/icons-vue'

const featuredProducts = ref([
  {
    name: '高原有机藜麦',
    origin: '青海海西州',
    feature: '海拔3000米种植 蛋白质含量18%',
    certification: '中国有机产品认证'
  },
  {
    name: '古法红糖',
    origin: '云南临沧',
    feature: '传统工艺熬制 无添加剂',
    certification: '非物质文化遗产'
  },
  {
    name: '富硒猕猴桃',
    origin: '陕西眉县',
    feature: '天然硒含量≥15μg/100g',
    certification: '地理标志产品'
  }
])

const features = ref(["扶贫专享", "冷链直达", "48小时退换", "产地溯源"]);

const tagIcons = {
  扶贫专享: Present,
  冷链直达: ScaleToOriginal,
  "48小时退换": Clock,
  产地溯源: Sunny,
};

const guarantees = ref([
  { icon: Coin, title: "价格透明", desc: "农家直供无中间差价" },
  { icon: Van, title: "极速配送", desc: "当日下单次日送达" },
  { icon: ScaleToOriginal, title: "缺重赔付", desc: "足斤足两承诺" },
  { icon: Present, title: "助农补贴", desc: "政府专项补贴支持" },
]);
</script>

<style scoped>
.home-container {
  background: #f8f9fa;
  min-height: 100vh;
}

.main-header {
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
}

.logo-group {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo-text {
  font-size: 28px;
  font-weight: 600;
  color: #67c23a;
}

.agriculture-carousel {
  max-width: 1200px;
  margin: 20px auto;
  border-radius: 8px;
  overflow: hidden;
}

.carousel-content {
  position: relative;
  height: 100%;
}

.image-placeholder {
  height: 100%;
  background: linear-gradient(45deg, #f0f9eb, #d9f7be);
}

.carousel-text {
  position: absolute;
  bottom: 40px;
  left: 40px;
  color: #333;

  h2 {
    font-size: 32px;
    margin-bottom: 12px;
  }

  p {
    font-size: 18px;
    color: #666;
  }
}

.feature-tags {
  max-width: 1200px;
  margin: 20px auto;
  display: flex;
  gap: 15px;
}

.service-tag {
  padding: 12px 20px;
  font-size: 15px;
  border-radius: 20px;

  .tag-icon {
    vertical-align: middle;
    margin-right: 8px;
  }
}

.product-section {
  max-width: 1200px;
  margin: 30px auto;
  padding: 0 20px;
}

.product-card {
  margin-bottom: 20px;
  transition: transform 0.3s;

  &:hover {
    transform: translateY(-5px);
  }
}

.product-image {
  height: 200px;
  background: #e1f3d8;
  border-radius: 4px;
}

.product-info {
  padding: 15px;
}

.price-group {
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;

  .current-price {
    font-size: 20px;
    color: #f56c6c;
    font-weight: 600;
  }

  .original-price {
    color: #999;
    text-decoration: line-through;
  }
}

.stats-group {
  display: flex;
  align-items: center;
  gap: 10px;

  .sold-count {
    color: #666;
    font-size: 13px;
  }

  .progress-bar {
    flex: 1;
  }
}

.service-guarantee {
  max-width: 1200px;
  margin: 40px auto;
  padding: 30px 20px;
  background: #fff;
  border-radius: 8px;
}

.guarantee-item {
  display: flex;
  align-items: center;
  padding: 15px;

  .guarantee-icon {
    color: #67c23a;
    margin-right: 15px;
  }

  h4 {
    margin: 0 0 6px;
    font-size: 16px;
  }

  p {
    margin: 0;
    color: #666;
    font-size: 13px;
  }
}

/* 新增模块公共样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 40px 0 30px;
  padding: 0 20px;
}

/* 助农专区介绍模块 */
.help-section {
  background: #fff;
  padding: 40px 0;
  margin-top: 30px;
}

.intro-image {
  height: 320px;
  background: #e1f3d8;
  border-radius: 8px;
}

.intro-content {
  padding: 20px;

  h3 {
    color: #67c23a;
    margin-bottom: 15px;
  }

  .stats {
    color: #666;
    font-size: 0.9em;
    margin: 10px 0;
  }

  .desc {
    line-height: 1.8;
    color: #444;
  }

  .achievement {
    margin-top: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 4px;

    .el-icon {
      color: #e6a23c;
      margin-right: 10px;
    }
  }
}

/* 农展品介绍模块 */
.products-section {
  margin: 50px 0;
}

.product-scroll {
  display: flex;
  gap: 25px;
  padding: 0 20px 20px;
}

.product-card {
  width: 280px;
  flex-shrink: 0;

  .product-image {
    height: 180px;
    background: #f0f9eb;
    border-radius: 4px;
  }

  .product-info {
    padding: 15px;

    h4 {
      margin: 0 0 8px;
      color: #333;
    }

    .origin {
      color: #666;
      font-size: 0.9em;
    }

    .feature {
      color: #67c23a;
      margin: 10px 0;
    }

    .certification {
      color: #888;
      font-size: 0.85em;

      .el-icon {
        vertical-align: middle;
        margin-right: 5px;
      }
    }
  }
}

/* 团购介绍模块 */
.groupbuy-section {
  background: #f8f9fa;
  padding: 40px 20px;
  margin-top: 30px;

  :deep(.el-step__title) {
    font-size: 16px;
    color: #333;
  }

  :deep(.el-step__description) {
    color: #666;
    line-height: 1.6;
  }
}

.groupbuy-tips {
  max-width: 800px;
  margin: 30px auto 0;

  p {
    margin: 8px 0;
  }
}

/* 响应式适配 */
@media (max-width: 768px) {
  .intro-image {
    height: 200px;
    margin-bottom: 20px;
  }

  .product-scroll {
    overflow-x: auto;
    padding-bottom: 15px;
  }

  .product-card {
    width: 260px;
  }

  :deep(.el-steps) {
    flex-direction: column;

    .el-step {
      margin-bottom: 20px;
    }
  }
}
</style>
